<script setup lang="ts">
  import { computed } from "vue";
  import { getSize } from "../utils";

  interface Props {
    bottom?: string | number;
    fixed?: boolean;
  }

  const props = withDefaults(defineProps<Props>(), {
    bottom: 0,
    fixed: false,
  });

  const styles = computed<any>(() => {
    return {
      bottom: getSize(props.bottom),
      position: props.fixed ? "fixed" : "absolute",
    };
  });
</script>

<template>
  <div class="umi-action-bar" :style="styles">
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
  .umi-action-bar {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    z-index: 998;
  }
</style>
